<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <title>Vite App</title>
      <style>
        #live2d-container {
            position: fixed;
            right: 20px;  /* 自定义位置 */
            bottom: 0;    /* 固定在页面底部 */
            width: 250px; /* 自定义宽度 */
            height: 600px;
            z-index: 1000; /* 保持在最上层 */
            background-color: transparent;  /* 可选背景色 */
            pointer-events: none;  /* 防止阻挡页面其他交互 */
        }

        #live2d-container canvas {
            pointer-events: auto; /* 确保 Live2D 模型本身可点击 */
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  <div id="live2d-container"></div>

    <!-- 引入 Live2D Widget 脚本 -->
    <script src="https://unpkg.com/live2d-widget@latest/lib/L2Dwidget.min.js"></script>

    <script>
        // 初始化 Live2D 模型并将其放入自定义容器
        L2Dwidget.init({
            model: {
                jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
                scale: 1
            },
            display: {
                position: "right",
                width: 250,
                height: 400
            },
            mobile: {
                show: true,
                scale: 0.5
            },
            react: {
                opacityDefault: 0.8,
                opacityOnHover: 1
            },
            // 将 Live2D 模型渲染到自定义 div 内
            container: document.getElementById('live2d-container')
        });
    </script>
  </body>
</html>
